<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>平台数据展示</title>
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/css/layui.css">
    <style type="text/css">
        #dataBody {
            display:block;
            height:500px;
            overflow-y:scroll;
        }

        #dataHead,#dataBody tr {
            display:table;
            table-layout:fixed;
        }
        #dataBody::-webkit-scrollbar {
            display: none;
        }
         .table_con{
            margin-top: 20px;
        }
        #dataHead th{
            max-width: 100px;
            min-width: 100px;
            text-align: center;
        }
        #dataBody td{
            max-width: 100px;
            min-width: 100px;
            text-align: center;
        }
        #tableData tr:nth-last-child(1) td{
                background-color: rgb(221,235,247);
        }
     </style>
</head>
<body>
<div>
    <div class="layui-container " style="width: 100%;" id="indexModel">

        <div class="layui-row" style="margin-top: 10px;">
            <div class="layui-col-md3 " style="margin-right: 10px;">
                <input type="text" class="form-control" required  id="searchTime"  placeholder="请输入日期"  autocomplete="off" >
            </div>
            <div class="layui-col-md3 ">
                <div class="btn btn-success" id="searchBtn" onclick="showDataPage.getData()">查询</div>
            </div>
        </div>
        <div class="table_con">
            <table class="table table-bordered table-hover" id="tableData">
                <thead id="dataHead">

                </thead>
                <tbody id="dataBody">

                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        showDataPage.init();
    });
    var showDataPage = {
        init:function () {
            var _this = this;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#searchTime',
                value: new Date(new Date()-1000*60*60*24),
                showBottom: false,
                position: 'fixed'
            });
            _this.getData();
        },
        getNowDate:function () {
            var data = '';
            //console.log(nowTime)
            var date = new Date(new Date()-1000*60*60*24); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            data = Y + M + D;
           // console.log(data);
            return data;
        },
        getData:function () {
            var _this = this;
            //_this.getNowDate();
            var baseURL = "../../";
            var  indexLoading = layer.load(2);
            var params = {
                startDate:$("#searchTime").val()?$("#searchTime").val():_this.getNowDate()
            };
            $.ajax({
                type : "post",
                url : baseURL+"platformDataDaily/findEverydayPlatformContrast",
                contentType:"application/json",
                data:JSON.stringify(params),
                success: function(data) {
                    layer.close(indexLoading);
                    if(data.code==0){
                        _this.transData(data.result);
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){

                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
        },
        transData:function (data) {
            var _this = this;
            var theadItem = [];
            var str = '';
            var _html = '';
            var dateTime = '';
            for(item in data){
                //console.log(item);
                dateTime = item;
                for(item2 in data[item]){
                    //console.log(item2);
                    _html = _html + '<tr><td>'+dateTime+'</td><td>'+item2+'</td>';
                    for(var i = 0 ; i<data[item][item2].length;i++){
                        _html = _html+ '<td>'+data[item][item2][i].value+'</td>';
                        if(theadItem.indexOf(data[item][item2][i].param) == -1){
                            // console.log(data[item][item2][i].param);
                            theadItem.push(data[item][item2][i].param);
                        }
                    }
                    _html = _html + '</tr>';
                }
            };
            str = str + '<tr><th>日期</th><th>平台</th>';
            for(var j=0;j<theadItem.length;j++){
                str = str + '<th>'+theadItem[j]+'</th>';
            };
            str = str + '</tr>';
            $("#dataHead").html(str);
            $("#dataBody").html(_html);
        }
    }
</script>
</html>